<template>
	<view class="bcg">
		<swiper :indicator-dots="true" :autoplay="true" :interval="5000" class="banner"
			:duration="1000" :circular="1000">
			<swiper-item v-for="item in bannerData" :key="item.name"  mode="aspectFill">
				<image :src="urls.baseURL+item.url" class="slide-image"></image>
			</swiper-item>
		</swiper>

		<view class="info-price clear">
			<view class='price'>￥{{goodsData.show_price}} </view>
		</view>
		<view class="info-title">
			<text>{{goodsData.goods_name}}</text>
		</view>

		<view style="border-top:1px solid #F6F6F6;background: #fff; padding:5px 15px;">
			<view class="clearfix flex grey ">
				<text>{{goodsData.descr}}</text>
			</view>
		</view>

		<!--评价-->
		<!-- 	 <block wx:if="{{pjDataList!=''}}">
			   <view class='pj_box'>
			     <view style="height:40px;line-height: 40px;border-bottom:1px solid #f5f5f5;">
			      <view style='float:left;'>商品评价</view>
			      <view style='float:right;margin-left:2px;margin-top:-1px;'>
			         <image src="/static/QQ.png" class="ico_img_jt"></image>
			      </view>
			      <view style='float:right;font-size:12px;color:#A2A2A2;'>
			         <navigator >查看全部</navigator>
			      </view>
			      <view class='clear'></view>
			     </view>
			     <block v-for="item in pjDataList"  :key="item">
			       <view class="list_item">
			         <view class='pj_u_info clear'>
			           <view class='header_img'><image :src="item.headpic" mode="aspectFit"></image></view>
			           <view class='name'>{{item.author}}</view>
			           <view class='time'>{{item.add_time}}</view>
			         </view>
			         <view class='pj_cont'>
			           {{item.content}}
			         </view>
			       </view>
			     </block>
			 </view>
			 </block> -->

	</view>
	<!--底部浮动 start-->
	<view class="foot-nav mt15">
		<view class="flex con gridXt ">
			<view class="fast-links mr15 flex f12">
				<view class="sub " bindtap='shoucang'>
					<image src="@/static/Apple.png" class="iconn"></image>
					<text class="iconfont">收藏</text>
				</view>
				<view class="sub">
					
						<image src="@/static/Apple.png" class="iconn"></image>
						<text class="iconfont">店铺</text>
					
				</view>
				<view class="sub ">
					<image src="@/static/Apple.png" class="iconn"></image>
					<text class="iconfont">购物车</text>
				</view>
			</view>
			<view class="add-cart sub f16">
				<button class="add-cart-btn" bindtap='buy'>加入购物车</button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue"
	import { onLoad } from "@dcloudio/uni-app";
	import { getGoods } from "@/api/api";
	import urls from "@/api/url";
	const goodsData = ref<GoodsData>({
		id: 0,
		goods_name: "",
		thumb: "",
		descr: "",
		sell_price: null,
		show_price: null,
		label: "",
		banner: "",
		limits: null,
		number: null,
		cost: null,
		state: 0,
		update_time: "",
		create_time: "",
		is_delete: null,
		store: null,
		cid: 0
	});
	const bannerData = ref<GoodsBanner[]>([]);
	onLoad(async (options) => {
		const gid = options.gid;
		const res = await getGoods({ page: 1, limit: 1, gid: gid });
		goodsData.value = (res.data as DataRes<GoodsData[]>).data[0];
		let files = goodsData.value.banner?.split(";")
		files?.forEach(v => {
			let file = v.split(":");
			bannerData.value.push({ name: file[0], url:file[1] });
		})
		bannerData.value.pop();
	})
</script>

<style>
	.bcg {
		background-image: linear-gradient(to bottom, #FFF0BA 5%, #ffffff 100%);
		height: 100vh;
	}

	.clear {
		clear: both;
		overflow: hidden;
	}

	.banner {
		height: 300px;
	}

	.slide-image {
		width: 100%;
		height: 100%;
	}
	.grey{
		color:#949494;
		font-size: 23rpx;
	}

	.flex {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		width: 100%;
	}

	.sub {
		height: 110rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		margin: 0 10rpx;
	}

	.info-title {
		background: #fff;
		padding: 10px 15px;
		font-size: 34rpx;
		font-weight: bold;
	}

	.info-price {
		border-bottom: 1px solid #F6F6F6;
		background: #fff;
		padding: 0px 15px;
	}

	.price {
		float: left;
		height: 50px;
		line-height: 50px;
		color: #FF6666;
		font-size: 25px;
	}

	.fenxiang {
		text-align: center;
		font-size: 12px;
		color: #999;
		width: 50px;
		line-height: 20px;
		overflow: hidden;
		float: right;
	}

	.fenxiang image {
		width: 20px;
		height: 20px;
	}

	.price em {
		font-size: 12px;
		margin-left: 20px;
	}

	.flex {
		position: relative;
		width: auto;
		margin: 0 -15px;
		padding: 3px 15px 0;
	}

	.store-info {
		background: #fff;
	}

	.store-info .store,
	.store-info .rz-item {
		padding: 10px 15px;
	}

	.store-info .rz-item view {
		margin-right: 10px;
	}

	.list_item {
		position: relative;
		padding: 15px 10px;
		background: #fff;
		border-bottom: 1px solid #f5f5f5;
	}

	.details_box {
		margin-top: 10px;
		padding: 0 15px;
		font-size: 13px;
		background: #fff;
	}

	.pj_box {
		margin-top: 10px;
		padding: 0 15px;
		font-size: 13px;
		background: #fff;
	}

	.ico_img_jt {
		vertical-align: middle;
		width: 16px;
		height: 16px;
	}

	.pj_u_info .header_img {
		float: left;
	}

	.pj_u_info .header_img image {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		overflow: hidden;
	}

	.pj_u_info .name {
		float: left;
		margin-left: 10px;
		font-size: 15px;
		color: #333;
	}

	.pj_u_info .time {
		float: right;
		font-size: 12px;
		color: #999;
	}

	.pj_cont {
		font-size: 13px;
	}

	.pj_img {
		margin: 10px 10px 0px 10px;
		width: 120px;
		height: 100px;
	}


	.foot-nav {
		height: 46px;
	}

	.con {
		position: fixed;
		height: 46px;
		left: 0;
		bottom: 0;
		right: 0;
		background: #fff;
		z-index: 999;
	}

	.fast-links {
		width: 160px;
		line-height: 18px;
		text-align: center;
	}

	.iconfont {
		padding: 5rpx;
		font-size: 30rpx;
	}

	

	.notempty {
		position: relative;
	}

	.notempty::after {
		content: "";
		display: block;
		width: 9px;
		height: 9px;
		border: 1px solid #fff;
		border-radius: 50%;
		background: #e64340;
		position: absolute;
		top: 5px;
		right: 50%;
		margin-right: -16px;
	}

	.add-cart .add-cart-btn {
		background: linear-gradient(to right bottom, #FF8041, #FFCB42);
		color: #fff;
		border-radius: 50px;
		padding: 0px;
		width: 150px;
		height: 35px;
		line-height: 35px;
		margin-top: 5px;
		margin-right: 15px;
	}

	.kefu button {
		border: none;
		background: none;
		display: block;
		padding: 0px;
		margin: 0px;
		line-height: 1.5em;
		font-size: inherit;
	}

	.kefu button::after {
		border: none;
	}

	.kefu .button-hover {
		color: #333;
		background: none;
	}

	.kefu button .iconfont {
		padding: 0px;
	}
	.gridXt{
		height: 120rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: baseline;
	}
	.iconn{
		width: 60rpx;
		height: 60rpx;
	}
</style>